<template>
  <div class="todo">
    <Navigation></Navigation>
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import todoStore from '@renderer/store/todo'
// import LeftSideBar from './LeftSideBar.vue'
import Navigation from '@renderer/views/Navigation.vue'
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

const store = todoStore()

const router = useRouter()

window.electron.ipcRenderer.on('todoNavAdd', (_e, data: TodoNavItem) => {
  // store.todoNavList.push(data)
  store.getTodoNavList()
  router.push({
    path: '/list',
    query: {
      list: data.name
    }
  })
})

window.electron.ipcRenderer.on('todoNavUpdate', (_e, data: TodoNavItem) => {
  const index = store.todoNavList.findIndex((item) => item.id === data.id)
  if (index !== -1) {
    store.todoNavList[index] = data
  }
  store.pullData()
  store.getTodoNavList()
})

onMounted(() => {
  store.pullData()
  store.getTodoNavList()
  store.getTrashList()
})
</script>

<style>
.todo {
  height: 100%;
  display: flex;
  background: var(--xz-card-bg);
}

.todo-page {
  display: flex;
  height: 100%;

  .todo-page-container {
    display: flex;
    flex-direction: column;
    width: 600px;
    border-right: 1px solid var(--xz-card-border);

    .header,
    .add-task {
      display: flex;
      align-items: center;
      width: 100%;
    }

    .header {
      padding: 20px 15px 0 15px;
      margin-bottom: 5px;
      justify-content: space-between;

      i {
        font-size: 1.4rem;
      }

      .left-action {
        display: flex;
        align-items: center;

        .expand {
          i {
            margin-right: 10px;
          }
        }

        .title {
          font-size: 1.2rem;
          font-weight: bold;
        }
      }
    }

    .add-task {
      width: 100%;
      padding: 0 15px;
      position: relative;

      input {
        width: 100%;
        border: none;
        border-radius: var(--xz-main-radius);
        background: var(--xz-secondbg);
        color: var(--xz-fontcolor);
        min-height: 40px;
        outline: none;
        font-size: 0.9rem;
        padding: 10px;
        border: 1px solid transparent;

        &:focus {
          border: 1px solid var(--xz-main);
        }

        &::placeholder {
          color: #bfbfbf;
          font-size: 0.9rem;
        }
      }

      input:focus + .action {
        display: flex;
      }

      .action {
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        display: none;
        gap: 10px;

        i {
          font-size: 1.2rem;
          color: #777;
        }
      }
    }

    .container {
      width: 100%;
      padding: 0 15px;
      position: relative;
      margin-top: 20px;

      .task-list-container {
        display: none;
      }

      .task-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;

        .task-item {
          width: 100%;
          border-radius: var(--xz-main-radius);
          padding: 8px 5px 8px 15px;
          display: flex;
          align-items: center;
          gap: 8px;
          border-bottom: 1px solid var(--xz-secondbg);
          transition: all 0.3s ease;
          position: relative;

          &:hover {
            background-color: var(--xz-secondbg);
          }

          &.active {
            background-color: var(--xz-secondbg);
          }

          > input {
            flex: 1;
            border: none;
            height: 25px;
            font-size: 0.9rem;
            background: none;
            color: var(--xz-fontcolor);

            &:focus {
              outline: none;
            }

            &::placeholder {
              color: #bfbfbf;
            }
          }

          .task-item-right {
            display: flex;
            height: 100%;
            line-height: 100%;
            font-size: 0.6rem;
            align-items: center;
            width: fit-content;

            span {
              cursor: pointer;
              text-wrap: nowrap;
              overflow: auto;
            }
          }
        }

        .task-group {
          width: 100%;

          .expand {
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 0.75rem;
            gap: 4px;

            i {
              transition: all 0.3s ease;
              transform: rotate(-90deg);
            }

            &.expanded {
              i {
                transform: rotate(0deg);
              }

              + .task-list-container {
                display: block;
              }
            }

            .text {
              font-weight: bold;
              margin-right: 8px;
            }
          }
        }
      }
    }
  }
}
</style>
